// v-if 和 v-show 都是 Vue.js 中用于条件渲染的指令，但它们在工作原理和使用场景上有显著区别。

// v-if
    // 工作原理:
        /**
          *  当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。
          *  由于 DOM 元素是根据条件动态地创建或销毁的，因此 v-if 有更高的切换成本，特别是在频繁切换时。
         */

    // 使用场景:
        // 适用于在条件可能会很少变化，或者初始化时就不需要渲染的场景。例如，当你有一个需要延迟加载的组件时，可以使用 v-if。

// v-show
    /***
     * v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。
     * 当条件为 false 时，元素的 display 属性被设置为 none，但元素仍然存在于 DOM 中，并且仍然占据空间，只是不显示。
     * 由于 v-show 只是通过 CSS 控制显示，元素始终存在于 DOM 中，所以切换的开销较小，适合频繁显示和隐藏的场景。
     */